<?php
$ci = &get_instance();
$ci->load->model("subcategory");

$subcategories = $ci->subcategory->getAllRecords();
?>

<style>
    /*
        Flickr Gallery
    */


    .thumbs { margin: 0; padding: 0; overflow: hidden; }
    .thumbs li { list-style: none; float: left; margin: 5px; padding: 3px; background: #eee; -moz-box-shadow: 0 0 4px #444; -webkit-box-shadow: 0 0 2px #000; }
    .thumbs li a { }
    .thumbs li img { display: block; }
    .thumbs li a img { border: none;}

    #cycle { margin: 0; padding: 0; width: 500px; height: 333px; padding: 3px; background: #eee; -moz-box-shadow: 0 0 2px #000; -webkit-box-shadow: 0 0 2px #000;}
    #cycle li { position: relative; list-style: none; margin: 0; padding: 3px; width: 500px; height: 333px; overflow: hidden; }
    #cycle li div { position: absolute; bottom: 3px; left: 3px; padding: 3px; width: 494px; background: black; color: white; font-size: 12px; opacity: .8; }


    img {
        max-width: none;
    }

    .pasos{
        width: 100%;
        overflow:hidden;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .pasos ul{
        margin: 0;
        padding: 0;
        font: bold 14px Verdana;
        list-style-type: none;
        text-align: center; /* "left", "center", or "right" align menu */
    }

    .pasos li{
        display: inline;
        margin: 20px;
    }

    .pasos li a{
        display:inline-block;
        text-align:center;
        text-decoration: none;
        color: white;
        background:orange;
        margin: 0;
        margin-right:5px; /*right spacing between each link */
    }

    .paso_seleccionado{
        width:15px;
        height:15px;

    }

    .paso_no_seleccionado{
        width:5px;
        height:5px;
        border-radius: 100px; /*really large border radius to create round borders*/
        -moz-border-radius: 100px;
        -webkit-border-radius: 100px;
    }

    .pasos a span{
        position:relative;
        top:40%;
    }

    .pasos li a:visited{
        color: white;
    }

    .pasos a:hover{
        background: orange;
    }
    /*
    Boton Siguiente
    */
    .btn-siguiente {
        color: #FFFFFF;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        background-color: #FFA500;
        background-image: -moz-linear-gradient(top, #FFA500, #FFA500);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFA500), to(#FFA500));
        background-image: -webkit-linear-gradient(top, #FFA500, #FFA500);
        background-image: -o-linear-gradient(top, #FFA500, #FFA500);
        background-image: linear-gradient(bottom, #FFA501, #FFA500);
        background-repeat: repeat-x;
        border-color: #FFA500;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFA500', endColorstr='#FFA500', GradientType=0);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    }
    .btn-siguiente:hover,
    .btn-siguiente:active,
    .btn-siguiente.active,
    .btn-siguiente.disabled,
    .btn-siguiente[disabled] {
        color: #FFFFFF;
        background-color: #FFA500;
    }

</style>
<div class="container contenido publica">
    <div class="pasos">
        <ul>
            <li><a href="<?php echo site_url('registro/tu_curso'); ?>" class="paso_no_seleccionado"><span></span></a></li>
            <li><a href="#" class="paso_seleccionado"><span></span></a></li>
            <li><a href="#" class="paso_no_seleccionado"><span></span></a></li>
        </ul>
    </div>
    <div style="text-align:center;"><span style="color:#514F4F; font-weight:regular;">Tu curso esta a un paso de ser publicado.</span><span style="color:#FFA563; font-weight: bold;"> Elegí la foto que lo representa.</span></div>
    <div class="row-fluid">
        <br>
        <br>
        <br>
    </div>
    <div style="float:left;width:40%;margin-left:2em;color:#67717a;">Seleccione el origen de su imagen</div>
    <div style="float:right;width:35%;margin-left:2em;color:#67717a;">Así se verá tu curso</div>
    <div style=" float:left; width:55%; margin:0em 2em 2em 2em;border-radius: 2px;" >
        <div class="fila" style=" width:100%;border: 1px solid #d0d0d0;padding:20px;">
            <a class="btn" style="width:44%;" href="<?= site_url('registro/imagen') ?>" target="_self">Imágenes Prediseñadas</a>
            <a class="btn btn-siguiente" style="width:44%;font-weight:bold;" href="#">Subir Imagen de Mi PC </a>


        </div>
        <div class="fila" style="width:100%;padding:20px;padding-top:40px;padding-bottom:40px; text-align:center;vertical-align:middle; float:left; border: 1px solid #d0d0d0; margin:-0.1em 0em 0em 0em;border-radius: 2px;">

            <h3>El archivo Se subio correctamente!</h3>





        </div>           
    </div>
    <div style=" text-align:center;float:right; width:32%; margin:0em 2em 0em 2em;padding-top:14px;padding-bottom:14px;border: 1px solid #d0d0d0;border-radius: 2px;" >
        <?php
        $img = base_url() . '/public/images/cursos/' . $upload_data['file_name'];
        $this->session->set_userdata('foto_curso', $img);
        ?>
        <div class="crop2" style="margin-left:6%;"><img src="<?= $img; ?>" /></div>
        <div class="fila"><br>
            <div style="font-family:arial ;margin-left:6%;font-size:x-large;font-weight:500;text-align:left;color:#67717a;"><?php echo $this->session->userdata('titulo'); ?></div><hr>
            <div style="font-family:arial ;margin-left:6%;margin-right:6%;text-align:left;"><p style="line-height:15px"> <?php echo $this->session->userdata('descripcion_corta'); ?>. </p>    
                <br><br>
            </div> 
        </div>


    </div>
    <div style="float:right;width:55%;margin-left:2em;color:#67717a;">

        <a id="btn-paso2" class="btn btn-siguiente"href="<?= site_url('registro/cargar_instituto') ?>" target="_self">Siguiente </a>
    </div>


    <script>
   
        $('#btn-subir-img').click(function() {
            $('#img_pc').click();
        });
	
	
        $('#buscar_imagen').change(function() {	
		
            $('#cbox').html("");
            $('#cbox').jflickrfeed({
                limit: 14,
                qstrings: {
                    tags : $('#buscar_imagen').val()
                },
                itemTemplate: '<li>'+
                    '<a rel="colorbox" href="{{image}}" title="{{title}}">' +
                    '<img src="{{image_s}}" alt="{{title}}" />' +
                    '</a>' +
                    '</li>'
            }, function(data) {
                $('#cbox a').colorbox();
            });
		
        });
	
    </script>